<template>
    <div class="floor2">

        <div class="floor2-left red">
            <div>视频专栏</div>
        </div>

        <div class="floor2-right">

            <el-row :gutter="32">
                <el-col :span="8" v-for="(item,index) in videos" :key="item.configId" v-show="index < 3">

                    <div class="floor2-right-head">
                        <div>
                            <img :src="PIC_URL + '/experience/images/' + iconVideoArr[index]" style="width: 24px;height: 24px;">
                            <span class="floor2-right-title">{{ item.channelName }}</span>
                        </div>
                        <div class="more" @click="onVideoGroup({configId:item.configId,channelName: item.channelName})">查看更多>></div>
                    </div>

                    <div class="floor2-right-com">

                        <div class="floor2-right-cell" v-for="val in item.list" :key="val.videoId" @click="onVideo(val)">
                            <div class="floor2-right-cell-title">{{ val.subject }}</div>
                            <div>{{ val.recordStartTime | formatDate('MM-DD') }}</div>
                        </div>

                    </div>


                </el-col>
            </el-row>

        </div>

    </div>
</template>

<script>
//视频专栏

import allVideo from "./allVideo";

import mixin from "../utils/mixin";

export default {
    name: "videoColumn",
    mixins: [mixin],
    props: {
        videos: {
            type: Array,
            default: ()=> []
        }
    },
    data(){
        return {
            iconVideoArr: ['icon7.png','icon8.png','icon9.png','icon7.png'],
        }
    }
}

</script>

<style scoped lang="scss">
@import "../style/style";
</style>